<template>
    <div class="container">
        <h3>数据发送</h3>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
             <div v-if="isShow">

                <el-row>
                    <el-col :span="12">

                        <el-form-item label="发送客户：" >
                            {{ruleForm.clientName}}
                        </el-form-item>
                        <el-form-item label="操作人：" >
                            {{name}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">

                        <el-form-item label="发送数量：" v-if="ruleForm.sendNum != ''">
                            {{ruleForm.sendNum}}袋
                        </el-form-item>
                    </el-col>
                </el-row>
               <el-col>
                 <el-row>
                   <el-form-item label="包装批号：" v-if="radio == '单次发送'">
                     {{ruleForm.batch}}
                   </el-form-item>
                   <el-form-item label="包装批号：" v-if="radio == '批次发送'">
                     {{filename}}
                   </el-form-item>
                 </el-row>
               </el-col>
               <el-col :span="10" v-if="radio == '单次发送'">
                 <el-form-item label="品名：" >
                   {{ruleForm.breedName}}
                 </el-form-item>
               </el-col>
               <el-col :span="12" v-if="radio == '单次发送'">
                 <el-form-item label="装量：" >
                   {{ruleForm.loadingQuantity}}
                 </el-form-item>
               </el-col>
                <el-form-item class="footerFixed">
                <el-button type="primary" @click="submitForm()">确认无误</el-button>
                <el-button @click="isShow = false">返回修改</el-button>
            </el-form-item>
            </div>
            <div v-else>
<!--                <el-row>-->
<!--                    <el-col>-->
<!--                        <el-form-item label="包装批号：" prop="batch">-->
<!--                            <el-select v-model="batchs" filterable @change="getshuju" value-key="id" placeholder="请选择" style="width:300px">-->
<!--                                <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.id"-->
<!--                                :label="item.batch"-->
<!--                                :value="item">-->
<!--                                </el-option>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
                <el-row>
                    <el-col :span="12">

                        <el-form-item label="发送客户：" prop="clientName">
                            <el-select v-model="kehus" filterable @change="getkehu" value-key="id" placeholder="请选择" style="width:300px">
                                <el-option
                                v-for="item in kehu"
                                :key="item.id"
                                :label="item.clientName"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="操作人：" >
                            <el-input placeholder="请输入内容" disabled  v-model.trim="name" style="width:300px">
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="24">

                        <el-form-item label="发送数量：" >
                            <el-input placeholder="请输入内容" v-model.trim="ruleForm.sendNum" style="width:300px">
                            </el-input>
                            <span style="margin-left:20px;">袋</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="" >
                      <el-radio v-model="radio" label="单次发送">单次发送</el-radio>
                      <el-radio v-model="radio" label="批次发送">批次发送</el-radio>
                    </el-form-item>
                    <el-form-item label="包装批号：" prop="batch" v-if="radio == '单次发送'">
                      <el-select v-model="batchs" filterable @change="getshuju" value-key="id" placeholder="请选择" style="width:300px">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.batch"
                            :value="item">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="包装批号" prop="“batch" v-else>
                      <el-upload
                          class="upload-daoru"
                          ref="upload"
                          :action="action"
                          :on-change="uploadonchange"
                          accept=".xlsx,.xls"
                          :limit="1"
                          :show-file-list='true'
                          :auto-upload="false"
                      >
                        <el-button slot="trigger" type="primary" size="small">点击上传</el-button>
                      </el-upload>

                    </el-form-item>

                  </el-col>
                  <el-col :span="10" v-if="radio == '单次发送'">
                    <el-form-item label="品名：">
                      {{ruleForm.breedName}}
                    </el-form-item>
                  </el-col>
                  <el-col :sapn="12" v-if="radio == '单次发送'">
                    <el-form-item label="装量：" >
                      {{ruleForm.loadingQuantity}}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item class="footerFixed">
                    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                    <el-button @click="backPage">返回</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
	import {packbatch_list,client_findByAll,order_save,order_saves} from "@/request/api"
    import {regionData,CodeToText} from 'element-china-area-data'
    export default {
        data() {
            return {
              disabled:true,
              filename:'',
              fileList:[],
              radio:'单次发送',
                isShow:false,
                name:'',
                kehus:"",
                sjcl:'',
                kehu:[],
                batchs:'',
                options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
                ruleForm: {
                    batch:'',
                    breedName:'',
                    loadingQuantity:'',
                    clientId:'',
                    clientName:'',
                    sendNum:'',
                  file:''
                },
              action:'',
              file:'',
                rules:{
                    batch: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],

                    clientName: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],

                }
            };
        },
        mounted(){
            this.name = this.$store.state.user
            this.init()
        },
        methods: {
            // 编辑获取数据
          uploadonchange(file) {
            this.file = file.raw
            this.filename = file.name
            // this.$notify({
            //   title: '提示',
            //   message: '上传成功',
            //   type: 'success'
            // });
          },
            init(){
               packbatch_list("").then((res)=>{
                   this.options = res.data
               })
               client_findByAll("").then((res)=>{
                   this.kehu = res.data
               })
            },
            getkehu(ele){
                this.ruleForm.clientName = ele.clientName
                this.ruleForm.clientId = ele.id
            },
            getshuju(ele){
                this.ruleForm.batch = ele.batch
                this.ruleForm.breedName = ele.breedName
                this.ruleForm.loadingQuantity = ele.weight + ele.units
				this.ruleForm.deadLine = ele.deadLine
                this.sjcl = ele.totalNumber
            },
            // 返回
            backPage () {
                this.$router.go(-1);
            },
            // 判断必填项是否填了
            submitrule(formName) {
                this.$refs[formName].validate((valid)=>{
                    if(valid){
						if(this.ruleForm.sendNum){
							const r = /^\+?[1-9][0-9]*$/;
							if (!r.test(this.ruleForm.sendNum)) {
								this.$notify({
									title: '提示',
									message: '发送数量不能为小数或负数',
									type: 'info',
									duration:1000
								});
								return false
							}
							if(this.ruleForm.sendNum>this.sjcl){
								this.$notify({
									title: '提示',
									message: '发送量不能大于实际产量',
									type: 'info',
									duration:1000
								});
								return false
							}
						}


                        this.isShow = true
                    }else{
                        return false
                    }
                })
            },
            submitForm(){
                if(this.radio == '单词发送'){
                  order_save(this.ruleForm).then((res)=>{
                      this.$notify({
                          title: '提示',
                          message: '保存成功',
                          type: 'success',
                          duration:1000
                      });
                      this.$router.go(-1)
                  })
                }else{


                  if(this.disabled){
                    this.disabled = false

                    let _this = this
                    setTimeout(function () {
                      _this.disabled = true
                    },7000)
                    let formdata = new FormData()
                    for(var a in this.ruleForm){
                      if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
                        this.ruleForm[a] = ""
                        formdata.append(a,'')
                      }else{
                        formdata.append(a,this.ruleForm[a])
                      }
                    }
                    formdata.append('file',this.file)
                    order_saves(formdata).then((res)=>{
                      this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success',
                        duration:1000
                      });
                      this.$router.go(-1)
                    })
                  }else{
                    return
                  }



                }

            }
        }
    }
</script>

<style scoped lang="less">

/deep/.upload-daoru{
  // background: #eee;
  .el-upload{
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    // float: right;
    margin-right: 10px
  }
}
/deep/.el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
  width:25%;
}
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}
</style>
